<template>
  <div class="treemap-container">
    <div class="tooltip"></div>
  </div>
</template>
<script>
// 树图组件需要监听传进来的体系结构以及行业数据的变化
import treemapChart from "../../charts/treemap/index.js";
import { mapGetters } from "vuex";

export default {
  name: "AppTreemap",
  watch: {
    data(newVal, oldVal) {
      treemapChart.update(this.template, this.data);
    }
  },
  computed: {
    ...mapGetters({
      template: "api/getTemplate",
      data: "api/getIndustries"
    })
  },
  mounted() {
    treemapChart.init({
      target: ".treemap-container",
      width: "100%",
      height: "99%"
    });
    // 所有视图要想完全绘制出来，需要进行update
    // treemapChart.update(this.template, this.data);
  }
};
</script>
<style>
.treemap-container {
  position: relative;
}
.treemap-container .node rect {
  shape-rendering: crispEdges;
}

.treemap-container .node--hover rect {
  stroke: #000;
}
.treemap-container text {
  font: 10px sans-serif;
}
</style>

